<script lang="ts" setup>
//获取对方id
import { useRoute} from 'vue-router'
let route=useRoute()
const skuId : any =route.query.id


import { ref ,onMounted} from 'vue'

interface User {
  date: string
  name: string
  address: string
}








//获取数据
import {getSkuList,addSku,getSkuInfo,editSku,delSku} from '@/api/shang/sku'

let flag=ref(false)
let data=ref([])
onMounted(()=>{
  
    get()
})

function get(){
    getSkuList(skuId).then((res:any)=>{
        data.value=Object.values(res)
    })
}

//弹框
const dialogVisible = ref(false)

let useFrom=ref({
    goods_id:'',
    name:'',
    number:'',
    price:'',
    id:''
})

//添加功能
let add=()=>{
  
   if(flag.value==false){
    useFrom.value.goods_id=skuId
    addSku(useFrom.value).then((res:any)=>{
        get()
        useFrom.value.name=''
        useFrom.value.number=''
        useFrom.value.price=''
        dialogVisible.value=false
    })
   }else{
   
    editSku(useFrom.value).then((res:any)=>{
        get()
        dialogVisible.value=false
    })
   }
}

//回显功能
const handleEdit = (index: number, row: any) => {
    flag.value=true
    dialogVisible.value=true
    getSkuInfo(row.id).then((res:any)=>{
        useFrom.value.name=res.name
        useFrom.value.number=res.number
        useFrom.value.price=res.price
        useFrom.value.id=res.id
        
    })
}
//删除功能
const handleDelete = (index: number, row: any) => {
    delSku(row.id).then((res:any)=>{
        get()
    })
}





</script>

<template>

    <el-button @click="dialogVisible=true">添加功能</el-button>
<el-table :data="data" style="width: 100%">
    <el-table-column label="ID" prop="id" />
    <el-table-column label="规格名称" prop="name" />
    <el-table-column label="规格数量" prop="number" />
    <el-table-column label="规格价格" prop="price" />
    <el-table-column align="right">
    
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >修改</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>





  <!-- 添加弹框 -->
  <el-dialog
    v-model="dialogVisible"
    :title="flag?'添加':'修改'"
    width="500"
   
  >
    <span>
              <div>
                规格名字：<el-input type="text" style="width: 240px;" v-model="useFrom.name"/>
              </div>
              
              <div>
                规格数量：<el-input type="text" style="width: 240px;"  v-model="useFrom.number"/>
              </div>
              <div>
                规格价格：<el-input type="text" style="width: 240px;" v-model="useFrom.price"/>
              </div>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="add">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style lang="less" scoped>
</style>
